<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
		.flex {
			display: flex;
		}

		body {
			padding: 0;
			margin: 0;
			background-color: #222;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.logistic_box {
			width: 570px;
			height: 292px;
			background-image: linear-gradient(to right, #c0c0aa, #1cefff);
			border-radius: 4px;
			margin-bottom: 50px;
			margin-top: 24px;
			scrollbar-width: none;
			overflow: hidden;
			overflow-y: auto;
			padding: 39px 21px 39px 46px
		}

		.logistic_box::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}

		.logistic_box::-webkit-scrollbar-track {
			background: #E5E5E5;
			/* border-radius: 2px; */
		}

		.logistic_box::-webkit-scrollbar-thumb {
			background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
			/* border-radius: 10px; */
		}

		.logistic_box .l_item {
			margin-bottom: 22px;
			font-size: 14px;
			line-height: 20px;
			color: #333333;
			position: relative;
		}

		.logistic_box .l_item::before {
			content: '';
			position: absolute;
			width: 9px;
			height: 9px;
			background: #222;
			border-radius: 50%;
			top: 4px;
			left: -26px;
		}

		.logistic_box .l_item::after {
			content: '';
			position: absolute;
			width: 0px;
			height: 95%;
			border: 1px solid #222;
			top: 20px;
			left: -23px;
		}

		.logistic_box .l_item:last-child::after {
			display: none;
		}

		.logistic_box .l_item span {
			flex-shrink: 0;
		}

		.logistic_box .l_item span:nth-child(2) {
			margin: 0 60px 0 20px;
		}

		.logistic_box .l_item span:nth-child(3) {
			width: 285px;
		}
	</style>
	<body>
		<div id="app">
			<div class="logistic_box">
				<div class="l_item flex">
					<span>2021-05-23</span>
					<span>09:31:45</span>
					<span>货物已完成配送，感谢您选择亮亮物流货物已完成配送，感谢您选择亮亮物流货物已完成配送，感谢您选择亮亮物流。</span>
				</div>
				<div class="l_item flex">
					<span>2021-05-23</span>
					<span>09:31:45</span>
					<span>货物已分配，等待配送</span>
				</div>
				<div class="l_item flex">
					<span>2021-05-23</span>
					<span>09:31:45</span>
					<span>货物已到达【深圳保税区站】</span>
				</div>
				<div class="l_item flex">
					<span>2021-05-23</span>
					<span>09:31:45</span>
					<span>货物已完成分拣，离开【惠州惠阳分拣中心】</span>
				</div>
				<div class="l_item flex">
					<span>2021-05-23</span>
					<span>09:31:45</span>
					<span>货物已到达【惠州惠阳分拣中心】</span>
				</div>
				<div class="l_item flex">
					<span>2021-05-23</span>
					<span>09:31:45</span>
					<span>货物已完成分拣，离开【杭州外单分拣中心】</span>
				</div>
				<div class="l_item flex">
					<span>2021-05-23</span>
					<span>09:31:45</span>
					<span>开始打包</span>
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!'
			}
		})
	</script>
</html>
